<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>State</title>
</head>

<body>
  <div>
    <p>state是单一状态树,里面集中存储使用的状态数据,并且state是
      响应式的,我们获取数据的时候可以直接在state获取
    </p>
    <p>$store.state.count 可以获取state的count数据</p>
    <p>$store.state.msg 可以获取state的msg数据</p>

    <h1>当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。
      为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键,
      mapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？通常，我们需要使
      用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。但是自从
      有了对象展开运算符 (opens new window)，我们可以极大地简化写法：</h1>

    <p>{{count}} 使用mapState可直接获取</p>
    <p>{{msg}} 使用mapState可直接获取</p>

    <h2>使用对象方式重新命名</h2>
    <p>{{num}} 使用mapState可直接获取</p>
    <p>{{message}} 使用mapState可直接获取</p>
    <p></p>
  </div>


  <script>
    import {
      mapState
    } from 'vuex'
    export default {
      computed: {
        /* 使用数组方法肯导致变量名重复 */
        /* ...mapState(['count', 'msg']) */
        /* 使用对象的方式给状态重新命名 */
        ...mapState({
          num: 'count',
          message: 'msg'
        })
      }
    }
  </script>
  <script>
    //假设这是store.js文件
    export default new Vuex.Store({
      state: {
        count: 0,
        msg: 'Hello Vuex'
      },
      mutations: {},
      actions: {},
      modules: {}
    })
  </script>
</body>

</html>